<template>
    <div class="wrapper">
        <div class="top" style="position: sticky; top: 0; z-index: 99">
            <van-search v-model="searchValue" @search="getQuerySerch" placeholder="请输入搜索关键词" />
        </div>
        <div class="container">
            <empty v-if="!posList.length"></empty>
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getQuery">
                <div class="list" v-for="(item, index) in posList" :key="index">
                    <img class="left" src="@/assets/agentImg.png" mode="" />
                    <div class="content">
                        <span>{{ item.AGENT_NAME }}</span>
                        <br />
                        <span>{{ item.PHONE_NO }}</span>
                        <br />
                        <div>
                            <span>商户：{{ item.COUNT }}</span>
                            <span style="margin-left: 10px">下级：{{ item.SUB_AGENT_COUNT || 0 }}</span>
                        </div>
                    </div>
                    <div class="rightTop" :style="{ backgroundColor: item.STATUS === 'TRUE' ? '#09C22E' : '#FB5151' }">
                        <span v-if="item.STATUS === 'TRUE'">已认证</span>
                        <span v-if="item.STATUS === 'AUDIT_REJECT'">未认证</span>
                        <span v-if="item.STATUS === 'SALES'">待采购</span>
                    </div>
                    <div class="rightBottom" @click="allot(item)">
                        {{ type === 'hb' ? '回拨' : '调拨' }}
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import { query } from '@/api/agent.ts'
import { allotApi, allotBackApply } from '@/api/posManagement.ts'
import store from '@/store'
import { showToast, showDialog } from 'vant'

export default defineComponent({
    name: 'subordinateAgent',
    setup() {
        const router = useRouter()
        const state = reactive({
            searchValue: '',
            loading: false,
            finished: false,
            currentPage: 1,
            type: store.state.data.TYPE,
            posList: []
        })
        // 拨打电话
        const callPhone = phone => {
            window.location.href = `tel://${phone}`
        }
        const getQuerySerch = () => {
            state.posList = []
            state.currentPage = 1
            getQuery()
        }
        const getQuery = () => {
            query({
                currentPage: state.currentPage,
                agentNoOrName: state.searchValue
            }).then(res => {
                if (res.object.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }
                state.posList = state.posList.concat(res.object)
            })
        }
        const allot = item => {
            if (item.STATUS === 'AUDIT_REJECT') {
                showToast('该用户暂未认证，请认证后重试')
                return
            }
            if (state.type === 'db') {
                showDialog({
                    message: `确定向${item.AGENT_NAME}调拨${store.state.data.POSTUSN.length}台机器吗？`,
                    title: '提示',
                    showCancelButton: true
                }).then(() => {
                    dbFun(item) // 调拨
                })
            }
            if (state.type === 'hb') {
                hbFun(item)
            }
        }
        const hbFun = item => {
            showDialog({
                message: `你好，共回拨机器 ${store.state.data.POSTUSN.length} 台，回拨前请确保已告知下级代理商 (${item.AGENT_NAME})。取得下级同意后，点击下方确定按钮，即可完成回拨`,
                title: '提示',
                showCancelButton: true
            }).then(
                () => {
                    allotBackApply({
                        posSns: store.state.data.POSTUSN,
                        sourceAgentNo: item.AGENT_NO,
                        showSetRate: false
                    }).then(res => {
                        if (res.code === 200) {
                            showDialog({
                                message: '操作成功',
                                title: '提示',
                                showCancelButton: false
                            }).then(() => {
                                router.go(-1)
                            })
                        }
                    })
                },
                () => {}
            )
        }
        const dbFun = item => {
            allotApi({
                posSns: store.state.data.POSTUSN,
                showSetRate: true,
                targetAgentNo: item.AGENT_NO
            }).then(res => {
                showDialog({
                    title: '调拨结果',
                    message: res.message || '调拨成功',
                    showCancelButton: false
                }).then(() => {
                    router.go(-1)
                })
            })
        }
        return {
            ...toRefs(state),
            allot,
            getQuery,
            getQuerySerch,
            callPhone
        }
    }
})
</script>

<style lang="scss" scoped>
.asty {
    color: #707070;
}

.imgsty {
    width: 10px;
    height: 10px;
    vertical-align: baseline;
    margin-left: 10px;
}

.container {
    padding: 11px;

    .list {
        width: 100%;
        height: 97px;
        background: #ffffff;
        border-radius: 11px;
        margin-bottom: 11px;
        display: flex;
        align-items: center;
        position: relative;

        .left {
            width: 40px;
            display: inline-block;
            margin-left: 24px;
            margin-right: 18px;
        }

        .content {
            display: inline-block;
            font-size: 11px;
            //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #545454;

            > span {
                &:nth-of-type(1) {
                    font-size: 13px;
                }
            }

            > span {
                &:nth-of-type(2) {
                    display: inline-block;
                    margin: 7px 0;
                }
            }

            view {
                span {
                    &:first-of-type {
                        margin-right: 15px;
                    }
                }
            }
        }

        .rightTop {
            width: 66px;
            height: 21px;
            border-radius: 0 11px 0 11px;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 11px;
            //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 21px;
        }

        .rightBottom {
            width: 71px;
            height: 24px;
            border-radius: 12px;
            border: 1px solid #ff4f00;
            font-size: 11px;
            //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ff4f00;
            text-align: center;
            line-height: 24px;
            position: absolute;
            right: 15px;
            bottom: 9px;
        }
    }
}
</style>
